import video from '@/assets/Timeline.webm'
import { SEO } from '@/utils/seo'
import React from 'react'
// https://cdn.zusheng.cc/cdn/video/Timeline.webm
import styles from './index.less'

const HomePage: React.FC = () => {
  const videoRef = React.useRef<HTMLVideoElement>(null)

  React.useEffect(() => {
    if (videoRef.current) {
      const remoteVideo =
        videoRef.current.canPlayType('video/webm; codecs="vp9, opus') === 'probably'
          ? 'https://tencent-oss.zusheng.cc/Timeline.webm'
          : 'https://tencent-oss.zusheng.cc/Timeline.mp4'

      videoRef.current.src = process.env.NODE_ENV === 'development' ? video : remoteVideo
    }
  }, [videoRef])

  return (
    <>
      <SEO
        title="Zusheng Studio - 创意设计与摄影作品集"
        description="Zusheng Studio是一个个人创意工作室，展示设计作品、摄影作品与创意文章。欢迎探索我们的创意世界。"
        keywords="Zusheng,设计,摄影,创意,作品集,个人网站,创意工作室"
        url="https://zusheng.cc"
      />
      <div className={styles.mediaOverlay + ' page'}>
        <div className={styles.mask}></div>
        <div className={styles.mediaDesc}>
          <p>别赶路 去感受路</p>
          <p
            style={{
              fontSize: '14px',
              color: 'rgba(255,255,255,0.65)'
            }}
          >
            10天3800公里，沃尔沃XC60向北疆出发
          </p>
        </div>
        <video
          ref={videoRef}
          className={styles.media}
          autoPlay
          loop
          muted
          preload="auto"
          playsInline
        ></video>
      </div>
    </>
  )
}

export default HomePage
